<template>
  <div class="Boutiquedetails" ref="homePage">
    <div class="bj">
      <van-nav-bar @click-left="clickleft" style="background: white;position: fixed;width: 100%;" :title="datalist.CategoryName+'详情'" left-text="" left-arrow></van-nav-bar>
    </div>
    <div style="width: 100%;height: 46px;"></div>
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img height="100%" width="100%" :src="image.ImgSrc" />
      </van-swipe-item>
    </van-swipe>
    <div class="box">
      <div class="box_hotel">
        <p class="hotel_name">{{datalist.Name}}</p>
        <p class="hotel_name" style="font-size: 13px;padding:0;margin-left: 10px;">{{datalist.Info}}</p>
        <div class="phone" @click="tiaozhuanditu">
          <van-icon color="#46d0ca" size="18" name="location" />
          <div>{{datalist.Prov}}{{datalist.City}}{{datalist.Dist}}</div>
        </div>
        <div class="phone" @click="phonebod">
          <van-icon color="#46d0ca" size="18" name="phone" />
          <div>0755-66565928758</div>
        </div>
      </div>
      <div class="box_score">
        <div style="font-size: 20px;">{{datalist.Score}}分</div>
        <div>棒极了</div>
      </div>
    </div>
    <div id="menus" class="box2">
      <div @click="gotoShow('notice')" :class="[isSelectedItem[0] ? 'active' : '' ,'menu-item']">预定须知</div>
      <div @click="gotoShow('feiyong')" :class="[isSelectedItem[1] ? 'active' : '' ,'menu-item']">特色</div>
    </div>
    <div class="reservation">
      <div style="display: flex;align-items: center; width:100%;" v-for="(item,index) in piaolist" :key="index">
        <div class="reservation_img">
          <img :src="item.Cover" />
        </div>
        <div class="reservation_type">
          <p>{{item.Name}}</p>
          <div class="reservation_js">
            <span>{{item.Tags}}</span>
          </div>
        </div>
        <div class="reservation_price" @click="BoutiqueOrder(item.gSN)">
          <span>订</span>
          <span>￥{{item.Price}}</span>
        </div>
      </div>
    </div>
    <div class="blank" id="blank" style="display: none;"></div>
    <div id="notice" class="product-content">
      <div v-html="datalist.Desc"> </div>
    </div>
    <div id="feiyong" class="product-content">
      <div v-html="datalist.Content"></div>
    </div>
  </div>
</template>

<script>
// import search from '../search.vue'
import {
  resourceDetails,
  goodsList
} from '@/api/home.js'
export default {
  components: {
    // "v-search": search,
  },
  data () {
    return {
      clintHeigth: '', //获取页面高度
      isSelectedItem: [true, false, false], //切换
      datalist: [],
      images: [],
      piaolist: [],
    }
  },
  mounted () {
    this.clientHeight = `${document.documentElement.clientHeight}` //document.body.clientWidth;
    this.$refs.homePage.style.minHeight = this.clientHeight + 'px';
    this.Detailsdata()
    this.goodsList()
  },
  beforeRouteLeave (to, from, next) {
    // 设置下一个路由的 meta
    if (to.name == 'Ordersynthesis' || to.name == 'BoutiqueOrder') {
      to.meta.keepAlive = false;
      next();
    } else {
      to.meta.keepAlive = true;
      next();
    }
  },
  created () {
    let that = this;
    window.onscroll = function () {
      let scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
      if (document.getElementById('feiyong')) {
        //这里是控制的是导航的隐藏固定跟动态滚动的
        if (scrollTop < document.getElementById('notice').offsetTop - 120 - document.getElementById('menus').offsetHeight) {
          document.getElementById('menus').setAttribute('class', 'box2')
          document.getElementById('blank').style.display = 'none';
        } else {
          document.getElementById('menus').setAttribute('class', 'box2 menus-top')
          document.getElementById('blank').style.display = 'block';
        }
        if (scrollTop > document.getElementById('feiyong').offsetTop - 40 - document.getElementById('menus').offsetHeight) {
          that.isSelectedItem = [false, true];
        } else {
          that.isSelectedItem = [true, false];
        }
      }
    }
  },
  methods: {
    clickleft () {
      this.$router.go(-1)
    },
    tiaozhuanditu () {
      let data = this.datalist.Lng + ',' + this.datalist.Lat
      let name = this.datalist.Name
      window.location.href = "https://map.baidu.com/mobile/webapp/place/marker/qt=inf&vt=map&act=read_share&code=131/third_party=uri_api&point=" +
        this.datalist.Lat + "%" + this.datalist.Lng + "&title=" + name + ""
    },
    phonebod () {
      window.location.href = "tel:0755-66565928758"
    },
    gotoShow: function (id) {
      var obj = document.getElementById(id);
      var total = obj.offsetTop - 80
      if (id === 'feiyongZhuan' || id === 'noticeZhuan') {
        var a = document.getElementById('menusZhuan').offsetHeight;
        document.getElementById('menusZhuan').setAttribute('class', 'box2 menus-top')
        document.getElementById('blankZhuan').style.display = 'block';
        total = total - a + 1;
      }
      document.body.scrollTop = total;
      document.documentElement.scrollTop = total;
      document.pageYOffset = total;
    },
    BoutiqueOrder (gSN) {
      let resSN = this.$route.query.resSN
      this.$router.push({
        path: "/boutique/BoutiqueOrder",
        query: {
          resSN: resSN,
          gSN: gSN,
        }
      })
    },
    Detailsdata () {
      let self = this
      let data = {
        resSN: this.$route.query.resSN, //标识
      }
      resourceDetails(data).then(res => { //详情数据请求
        this.images = res.Item.FocusImgs
        this.datalist = res.Item
      })
    },
    goodsList () {
      let data = {
        resSN: this.$route.query.resSN, //标识
      }
      goodsList(data).then(res => { //门票详情数据请求
        this.piaolist = res.List
      })
    }
  },
}
</script>

<style lang="scss">
.Boutiquedetails {
  .van-swipe {
    width: 100%;
    height: 250px;
    .van-swipe__indicators {
      .van-swipe__indicator--active {
        background-color: #46d0ca !important;
      }
    }
  }
  .bj {
    .van-icon {
      color: white !important;
    }
  }
  .box {
    display: flex;
    width: 100%;
    height: auto;
    background: #ffffff;
    justify-content: space-between;
    .box_hotel {
      width: 70%;
      display: flex;
      flex-direction: column;
      .hotel_name {
        font-size: 18px;
        padding: 10px;
      }
      .phone {
        width: 100%;
        display: flex;
        padding: 15px 10px;
        font-size: 12px;
        color: #555555;
        height: 30px;
        display: flex;
        align-items: center;
        div {
          width: 100%;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
    .box_score {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100px;
      height: 60px;
      color: white;
      background: #46d0ca;
      font-size: 14px;
      margin: 10px;
    }
  }
  .menus-top {
    position: fixed;
    top: 46px;
    width: 100%;
    margin-top: 0;
    background-color: #f6f6f6;
  }
  .box2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    .menu-item {
      width: 50%;
      line-height: 40px;
      font-size: 14px;
      background: #ffffff;
      text-align: center;
    }
    .active {
      background: #46d0ca;
      color: #ffffff;
    }
  }
  .product-content {
    margin-top: 10px;
    background: #ffffff;
    padding: 10px 10px;
    color: #868686;
    font-size: 0.75rem;
    line-height: 1.25rem;
    padding-bottom: 1.25rem;
    img {
      width: 100%;
      display: block;
    }
  }
  .reservation {
    display: flex;
    height: auto;
    padding: 15px 0;
    flex-direction: column;
    overflow: hidden;
    align-items: center;
    background: white;
    div {
      padding: 5px 0;
      .reservation_img {
        width: 40%;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 70%;
        }
      }
      .reservation_type {
        width: 70%;
        .reservation_js {
          span {
            margin-right: 10px;
          }
        }
      }
      .reservation_price {
        width: 20%;
        height: 70px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: #46d0ca;
        border-radius: 5px;
        color: white;
        font-size: 14px;
        margin-right: 10px;
      }
    }
  }
}
</style>
